<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="/static/h5/css/mui.min.css" rel="stylesheet"/>
    <link href="/static/h5/css/import.css" rel="stylesheet"/>
    
</head>
<body>
	
	<!-- <header class="mui-bar mui-bar-nav sy-bar-nav">
		
		<h1 class="mui-title">XXX的好习惯</h1>
	</header> -->	
	
	
	<div class="mui-content">
		
		<div class="mui-table-view sy-user-photo mui-text-center">
			<div class="user-img">
				<span class="photo-image">
					<span class="itBg" style="background-image: url('<{$child_info['child_img']}>');"></span>
				</span>
				<{if $child_info['gender'] == 1}>
					<i class="iconBoy"></i><!--iconBoy：男-->
				<{elseif $child_info['gender'] == 2}>
					<i class="iconGirl"></i><!--iconGirl：女-->
				<{/if}>
			</div>
			<div class="mui-h4"><span style="color: #fff;"><{$child_info['child_name']}></span></div>
			<p><span style="color: #e4e4e4;"><{$child_info['grade']}></span></p>
			
			<div class="mui-table-view sy-plyh-list">
				<ul class="mui-col-lay">
					<li class="muiCol">
						<div class="c-3ac9af"><{$child_info['habit_count']}></div>
						<p>好习惯</p>
					</li>
					<li class="muiCol">
						<div class="c-3ac9af"><{$child_info['stars']}></div>
						<p>累积星星</p>
					</li>
					
					<li class="muiCol">
						<div class="c-3ac9af"><{$child_info['zuoye_stars']}></div>
						<p>作业评分</p>
					</li>
				</ul>
			</div>
		</div>
		
		<div class="mui-card">
			<div class="mui-card-header">时间线</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<ul class="mui-tiem-line">
						<{foreach from=$time_line item=item}>
							<li v-for="(item,hover) in tiemLine">
								<div class="mui-col-xs-7">
									<div class="Line-time mui-col-xs-3"><{$item['task_time']}></div>
									<div class="Line-icon mui-col-xs-3">
										<div class="img-col-80"><img src="<{$item['image']}>"></div>
									</div>
									<div class="Line-name mui-col-xs-6"><{$item['name']}><span class="c-3ac9af" style="padding:0 5px;">×<{$item['continuity']}></span><span class="c-999999 mui-h6">天</span></div>
								</div>
								<div class="mui-text-right">
									<!--<div class="Line-info"><p>已坚持<span class="c-3ac9af">  {{ item.day }}天</span></p></div>-->
									<!-- <div class="Line-info"><span class="c-3ac9af">点击进入</span></div> -->
									<div class="Line-star"><span class="news-icon news-star" v-bind:class="{'news-star-hover':hover!=2}"></span></div>
								</div>
							</li>
						<{/foreach}>
					</ul>
				</div>
			</div>
		</div>
		
		
		<div id="example-demo2"><!--VueJS 渲染ID所用的开始-->
			
		<div class="mui-card" v-for="(item,hover) in listCard">
			<ul class="mui-table-view">
				<{foreach from=$task_list item=item}>
				<li class="mui-table-view-cell">
					<a href="javascript:;" class="mui-imgrow">
						<div class="mui-pull-left img-col-100"><img  src="<{$item['image']}>"></div>
						<div class="mui-media-body">
							<div class="mui-demo01-title mui-table">
								<div class="mui-table-cell mui-ellipsis"><{$item['name']}></div>
								<!-- <div class="mui-text-right"><span class="c-3ac9af">滑动试试</span>&nbsp;&nbsp;<span class="news-icon news-star" v-bind:class="{'news-star-hover':hover!=2}"></span></div> -->
							</div>
							<div class='mui-row mui-table'>
								<div class="Line-info"><p>已坚持<span class="c-3ac9af">  <{$item['continuity']}>天</span></p></div>
								<p class="mui-col-xs-4 mui-ellipsis"></p>
								<!-- <div class="mui-col-xs-8 mui-demo01-progressbar" id="demo5">
									<p class="mui-progressbar mui-progressbar-success" data-progress="10"><span></span>
									</p>
								</div> -->
							</div>
						</div>
					</a>
				</li>
				<{/foreach}>
			</ul>
		</div>
		
		</div><!--VueJS 渲染ID所用的结束-->
		<script>//VueJS 渲染的JS
		var LinshiExample = new Vue({
		  el: '#example-demo2',
		  data: {
		    listCard: [
		      { img: '../images/100-001.png', title: '每天预习功课', info: '已坚持34天'},
		      { img: '../images/100-002.png', title: '每天运动一小时', info: '已坚持30天' },
		      { img: '../images/100-003.png', title: '每天读书半小时', info: '已坚持24天'},
		      { img: '../images/100-004.png', title: '绘画', info: '已坚持10天' },
		      { img: '../images/100-005.png', title: '练字', info: '已坚持70天' },
		      { img: '../images/100-006.png', title: '弹钢琴', info: '已坚持60天' },
		      { img: '../images/100-007.png', title: '学英语', info: '已坚持50天' },
		      { img: '../images/100-008.png', title: '10点前睡觉', info: '已坚持30天' }
		    ]
		  }
		})
		</script>
		
	</div>
	
	<div class="sy-pup-main" id="pupMain" style="display: none;">
		<div class="mui-bar-tab">
			<a class="mui-tab-item" href="#">
				<span>
					<i class="sy-icon sy-icon120-xiguan"></i>习惯
				</span>
			</a>
			<a class="mui-tab-item" href="#">
				<span>
					<i class="sy-icon sy-icon120-zuoye"></i>作业
				</span>
			</a>
		</div>
	</div>
	
	<script src="js/import.js" type="text/javascript"></script>
	
</body>
</html>